.app-message-custom{
  position: relative;
  padding:0px 15px;
  .bell{
    cursor: pointer;
  }
  .bell-icon{
    
  animation: bellshake 2s ease-out infinite;

  -moz-transform-origin: 50% 0%;

  -webkit-transform-origin: 50% 0%;

  -o-transform-origin: 50% 0%;

  -ms-transform-origin: 50% 0%;

  transform-origin: 50% 0%;
  }
  @keyframes bellshake {
  
    10% {
      transform: rotate(22deg);
  
    }
  
    20% {
      transform: rotate(-22deg);
  
    }
  
    25% {
      transform: rotate(15deg);
  
    }
  
    30% {
      transform: rotate(-15deg);
  
    }

    35% {
      transform: rotate(5deg);
  
    }
  
    40% {
      transform: rotate(-5deg);
  
    }
  
    50% {
      transform: rotate(0deg);
  
    }
  
  }
  .bell:hover{
    .v-icon{
      color: #00bcd4;
    }
  }
  .popover{
    position: absolute;
    top: 32px;
    right: -100px;
    z-index: 100;
    width: 440px;
    border: 1px solid #e3e3e3;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 8px 12px 0 rgba(0,0,0,.12);
    > header{
      border-bottom: 1px solid #e3e3e3;
      padding: 10px 16px;
    }
    > .list-warpper{
      max-height: 68vh;
      overflow-y: auto;
        .pop-empty{
          width: 100%;
          padding: 40px 0;
          text-align: center;
          font-size: 18px;
          color: #777;
        }
       .item{
        > header{
          padding: 16px 40px 0 76px;
          position: relative;
          .action{
            display: inline-block;
            right: 16px;
            position: absolute;
            top: 16px;
            cursor: pointer;
          }
          .action i{
            font-weight: 1000;
            display: none;
          }
          .action i:hover{
            color:#00bcd4;
          }
          > .item-title{
            color: #555;
            display: block;
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            cursor: pointer;
            > .item-link{
              position: relative;
              > .v-icon{
                left: -26px;
                position: absolute;
                top: 3px;
              }
            }
          }
        }
        .informgroup{
            cursor: pointer;
            min-height: 48px;
            position: relative;
            padding: 0px 8px;
          >.informgroup-item{
            padding:10px;
            display: flex;
            .headportrait{
              width: 48px;
              height: 48px;
              color: #fff;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              >.headportrait-text{
                font-size: 22px;
                font-weight: 400;
              }
            }
            .messagecontent{
              padding: 0px 12px 0px 12px;
              width: calc(100% - 60px);
            }
          }
        }
        > .item-body{
          display: block;
          
        }
        > .item-body:hover{
          cursor: pointer;
        }
      }
      .item:hover{
        background-color: #F6F6F6;
        .action i{
          display: inline-block;
        }
      }
    }
    > .list-warpper::-webkit-scrollbar {
      display: none;
    }
    > .fotter{
      color: #00ACC1;
      display: block;
      font-size: 14px;
      line-height: 20px;
      padding: 12px 16px;
      text-align: center;
      cursor: pointer;
      background-color: #f6f6f6;
      border-top: 1px solid #e3e3e3;
    }
    > .fotter:hover{
     color:#26C6DA;
    }
  }
}